<template>
    <div class="constrBox">
        <ul class="infoBoxChild clearfix">
            <li v-for="(item,i) in indexMsg.items[modeType]" :key="item.id" v-if="i>length-1?false:true">
                <router-link :to="toUrl+'/'+item.id">
                <div class="infoImg">
                    <img :src="item.image" alt="">
                    <div class="clearfix infoTextBox">
                        <div class="infoText">
                            <p class="vipText">{{item.title}}</p>
                            <p class="infoItemId">ID:&nbsp<span>{{item.id}}</span></p>
                        </div>
                    </div>
                    <p class="infoItemPrompt">
                        <button @click.prevent.stop="collection({e:$event,id:item.id,type:modeType})">
                            <i class="coll" :class="{'avtiveColl':isInArray(item.id)}"></i>
                            收藏
                        </button>
                        <button @click.prevent.stop="modeDownload(item.id,item.title)">
                            <i class="downloadStatus"></i>
                            下载
                        </button>
                    </p>
                </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
    export default{
        name : "modeList",
         props: ["length",//渲染的个数
                "toUrl",//要跳转的地址
                "indexMsg",//请求回来的信息
                "modeType"//请求信息的类型
                ],
        data(){
            return {
                msg: "模型列表",

            }
        },
        computed: {
            ...mapState({//登录的用户信息
                user: state => state.AuthUser
            }),
            mismatchError() {
                return this.bag.has('password:auth') && !this.errors.has('password')
            },
            
            
        },
        methods:{
            errorWarning(msg) {
                this.$message({
                    message: msg,
                    type: 'error',
                    customClass : "sucPoint",
                    duration : 1000,
                    showClose : true
                });
            }, 
            ...mapMutations(//mutations中的方法
                ["loginShow","loginClose","loginLoginName","registerLoginName","collection"]
            ),
            
            modeDownload(id,name){//模型下载
                if(this.$store.state.AuthUser.userInfo){
                    axios({
                        method: 'get',
                        url: '/downdata/'+id,
                        // responseType: 'blob'
                    }).then(response => {
                         if(response.data.status=="1"){
                            window.open(this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey,"_blank"); 
                        }else if(response.data.status=="0"){
                            this.errorWarning('交易币不足，请充值后再进行下载...');
                        }
                        
                    }).catch((error) => {
                        this.errorWarning("下载失败");
                    }) 
                }else{
                    this.loginShow();
                }
                
            },
                // 下载文件
            download (data,name) {//下载要执行的函数
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(data)
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', name+'.zip')
                document.body.appendChild(link)
                link.click()
            },
            isInArray(value){
            var arr = null;
            if(!this.user.userInfo){
                return
            }else{
                if(this.modeType!="7"){
                    arr = this.user.userInfo.data.datacollects;
                    }else{
                        arr = this.user.userInfo.data.articlecollects;
                    }
                    for(var i = 0; i < arr.length; i++){
                        if(value === arr[i]){
                            return true;
                        }
                    }
                    return false;
            }
            
            }
        }
    }
</script>
<style>
@import "../css/global.css";
.constrBox .infoBoxChild li,.constrBox .infoImg,.constrBox .infoImg img{
    height: 273px;
}
.constrBox .infoTextBox{
    top: 215px;
}

.collection{
    color: #ffffff!important;
    /* background: #ea514b!important; */
}
.downLoadError{
    margin-top: 20%;
    font-size: 50px;
}
.infoItemPrompt i{
    display: inline-block;
    width: 20px;
    height: 18px;
    vertical-align:middle;
}
.coll{
    background: url(./img/coll.png) no-repeat center;
}
.infoItemPrompt button:hover .coll{
    background: url(./img/hoverColl.png) no-repeat center;
}
.downloadStatus{
    background: url(../img/indexDownload.png) no-repeat center;
}
.infoItemPrompt button:hover .downloadStatus{
    background: url(./img/hoverDownload.png) no-repeat center;
}
.avtiveColl{
    background: url(./img/hoverCollActive.png) no-repeat center;
}
.infoItemPrompt button:hover .avtiveColl{
    background: url(./img/collActiveEd.png) no-repeat center;
}
.constrBox .infoImg img{
    height: 273px!important;
}
</style>

